<template>
    <div class="course__item">
        <div class="course__item-inner">
            <div class="course__thumb">
                <img :src="courseDetails.thumbnail" alt="course Images">
            </div>

            <div class="course__content">
                <div class="course__content-top">
                    <div class="course__focus">
                        <i class="fa-solid fa-star"></i>
                        <span>{{ courseDetails.rating }}</span>
                        <span>({{ courseDetails.ratingCount }})</span>
                    </div>
                    <div class="course__price">
                        <p class="mb-0">
                            ${{ courseDetails.price }}
                        </p>
                    </div>
                </div>
                <h6> <nuxt-link to="/course-details">{{ courseDetails.title }}</nuxt-link> </h6>
                <div class="course__content-bottom course__content-bottom--border ">
                    <div class="course__mentor">
                        <img :src="courseDetails.avatar" alt="mentor">
                        <div class="course__mentor-name">
                            <nuxt-link to="/mentor-details">
                                {{ courseDetails.avatarName }}
                            </nuxt-link>
                        </div>
                    </div>
                    <div class="course__content-enroll">
                        <nuxt-link to="/signin" class="text-btn text-btn--small"> Enroll
                            Now<span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        courseDetails: {
            type: Object,
            default: () => { },
        },
    },

}
</script>

<style></style>